<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="default" />
<title>Facility</title>
<g:javascript src="jquery.dataTables.min.js"></g:javascript>
<g:javascript src="dataTables.bootstrap.js"></g:javascript>
<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'jquery.dataTables.min.css')}"
	type="text/css">
<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'dataTables.bootstrap.css')}"
	type="text/css">
</head>
<body>
	<table id="facility-list">
		<thead>
			<tr>
				<td>Name</td>
				<td>Description</td>
				<td>Delete</td>
				<td>Edit</td>
			</tr>
		</thead>
		<tbody>
			<g:each in="${facilities}" var="facilityItem">
				<tr id="facility-${facilityItem.id}">
					<td class="facility-name">
						${facilityItem.name}
					</td>
					<td class="facility-description">
						${facilityItem.description}
					</td>
					<td class="facility-edit"><a href="#">Edit</a></td>
					<td class="facility-delete"><a href="#">Delete</a></td>
				</tr>
			</g:each>
		</tbody>
	</table>
	<label id="facility-inform-message"></label>
	<div id="facility-form">
		<g:form>
			<label for="name">Name</label>
			<g:textField name="name" />
			<br />
			<label for="description">Description</label>
			<g:textField name="description" />
			<br />
			<g:submitButton name="index" value="Create" />
		</g:form>
	</div>
	<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog"
		aria-labelledby="delete-modal-title" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="delete-modal-title">Confirmation</h4>
				</div>
				<div class="modal-body" style="height: 1000px;">
					<g:message code="confirmation.delete" />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
					<button id="delete-modal-agree" type="button"
						class="btn btn-primary">Yes</button>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			var seletedFacilityId = 0;
			//initialize data table
			var table = $('#facility-list').DataTable();
			var facilityForm = $('#facility-form');
			var facilityInformMessage = $('#facility-inform-message');
			//handle click create
			facilityForm.on('click', 'input[type=submit]', function(submitEvent){
				submitEvent.preventDefault();
				createFacility(getFacilityParameters());
			});
			function getFacilityParameters(){
				var parameters = {}
				parameters[name] = $.trim(facilityForm.find('input[name=name]').html());
				parameters[description] = $.trim(facilityForm.find('input[name=description]').html());
				return parameters;
			}
			function createFacility(parameters){
				$.ajax({
					url: '${createLink(controller:'facility', action:'create')}',
					data: parameters,
					type: 'POST',
					beforeSend: function(){
						showLoadingStatus();
					},
					success: function(data, status, jqXHR){
						if(data != null){
							facilityInformMessage.html('Create facility '+parameters[name]+' successfully.');
						}
						else{
							facilityInformMessage.html('Fail to create facility '+parameters[name]+'.');
						}
					},
					error: function(jqXHR, status, error){
					}, 
					complete: function(jqXHR, status){
						hideLoadingStatus();
					}
				});
			}
			//handle click edit facility
			$('#facility-list').on('click', '.facility-edit', function(){
				editFacility(getFacilityId($(this)));
			});
			//handle click delete facility
			$('#facility-list').on('click', '.facility-delete', function(){
				seletedFacilityId = getFacilityId($(this));
				showConfirmation(getFacilityName($(this)));
			});
			$('#delete-modal-agree').on('click', function(){
				if(deleteFacility(seletedFacilityId)){
					var row = $(this).parent();
					removeFacilityFromTable(table, row);
					$('#facility-inform-message').html('Delete successfully.');
				}
				else{
					$('#facility-inform-message').html('Delete unsuccessfully.');
				}
			});
			function removeFacilityFromTable(table, row){
				table.row(row).remove().draw();
			}
			function getFacilityId(information){
				return parseInt($.trim(information.parent().attr('id').split(/facility-/g)[1]));
			}
			function getFacilityName(information){
				return $.trim(information.parent().find('.facility-name').html());
			}
			function editFacility(facilityId){
				$.ajax({
					url: '${createLink(controller:'facility', action:'edit')}',
					data: {'id': facilityId},
					type: 'GET',
					success: function(data, status, jqXHR){
						$('#facility-form').html(data);
					},
					error: function(jqXHR, status, error){
					}
				});
			}
			function showConfirmation(facilityName){
				$('#delete-modal .modal-body .item-name').html($.trim(facilityName));
				$('#delete-modal').modal('show');
			}
			function deleteFacility(facilityId){
				var deleted = false;
				$.ajax({
					url: '${createLink(controller:'facility', action:'delete')}',
					data: {'id': facilityId},
					type: 'POST',
					success: function(data, status, jqXHR){
						deleted = data;
					},
					error: function(jqXHR, status, error){
						deleted = false;
					},
					complete: function(jqXHR, status){
						$('#delete-modal').modal('hide');
					}
				});
				return deleted;
			}
		});
	</script>
</body>
</html>